<template>
	<div class="search-container">
		<!-- 搜索栏 -->
		<!--
          Tips: 在 van-search 外层增加 form 标签，且 action 不为空，即可在 iOS 输入法中显示搜索按钮
         -->
		<form class="search-form" action="/">
			<van-search
				v-model="searchText"
				show-action
				placeholder="请输入搜索关键词"
				background="#3296fa"
				@search="onSearch"
				@cancel="onCancel"
				@focus="isResultShow = false"
       
			/>
		</form>
		<!-- /搜索栏 -->

		<!-- 搜索结果 -->
		<search-result v-if="isResultShow" :search-text="searchText" />
		<!-- /搜索结果 -->

		<!-- 联想建议 -->

		<search-suggestion
			v-else-if="searchText"
			:search-text="searchText"
			@search="onSearch"
		/>
		<!-- /联想建议 -->

		<!-- 搜索历史记录 -->
		<search-history v-else :search-histories="searchHistories" @search="onSearch"/>
		<!-- /搜索历史记录 -->
	</div>
</template>
<script>
import SearchResult from './components/search-result'
import SearchHistory from './components/search-history'
import SearchSuggestion from './components/search-suggestion'
import {setItem,getItem}from '@/utils/storage'
export default {
	name: 'SearchPage',
	components: {
		SearchResult,
		SearchHistory,
		SearchSuggestion,
	},
	props: {},
	data() {
		return {
			searchText: '', // 绑定输入框变量
			isResultShow: false,
			searchHistories: getItem('serach-histories')||[],
		}
	},
	computed: {},
	watch: {
    searchHistories(val){
      setItem('serach-histories',val)
    }
  },
	created() {},
	methods: {
		onSearch(val) {
			// 更新文本框的内容
			this.searchText = val
			const index = this.searchHistories.indexOf(val)
			if (index !== -1) {
				this.searchHistories.splice(index, 1)
			}
			this.searchHistories.unshift(val)
			// 渲染搜索结果
			this.isResultShow = true
		},
		onCancel() {
			this.$router.back()
		},
	},
}
</script>
<style scoped lang="less">
.search-container {
	padding-top: 108px;
	.van-search__action {
		color: #fff;
	}
	.search-form {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 1;
	}
}
</style>
